<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<title>订单页面(未支付/已支付)</title>
		<style type="text/css">
		#popover{height: 100px;width:200px;}
		a#chaxun{font-size: 16px;padding: 0px;height: 44px;line-height: 44px;padding-right: 10px;color: #25d0c9;}
		#popover {height: 100px;width: 100%;left: 0px !important;height: 300px;}
		.leibie ul{margin-left: 10px;margin-right: 10px;max-height: none;padding-top: 20px;padding-bottom: 20px;text-align: center;}
		.leibie ul li{display: inline-block !important;width: 30%;border: solid 1px #ccc;}
		.leibie ul li a{text-align: center;}
		.leibie ul li.active{background-color: #35D0C9;color: #fff;}
		.mui-table-view-cell:after{background-color: transparent;}
		.feilei2{}
		.feilei2 ul{text-align: center;height: 48px;line-height: 46px;}
		.feilei2 ul li{display: inline-block;}
		.leibie ul li a{border-radius: initial !important;}
		.feilei2 ul li a{background-color: transparent;padding-top: 0px !important;padding-bottom: 0px !important;}
		.feilei2 ul li.active{color: #35D0C9;background-color: transparent;border-bottom: solid 2px #35d0c9;}
		.goods{width: 42% !important;max-width: initial !important;height: auto !important;line-height: initial !important;margin-left: 14px;}
		span.price{color: orange;font-weight: bold;position: absolute;bottom: 0px;}
		.goodlist{border-bottom: dashed 1px #ccc;} 
		button.zhifu{position: absolute;bottom: 0px;right: 0px;background-color: #35d0c9;color: #fff;border: none;}
		.youMsg{position: relative;height: 108px;}
		.orders{display: none;}
		.mui-popover .mui-table-view .mui-table-view-cell:first-child, .mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn){
			border-radius: 0px !important;}
		.mui-popover .mui-table-view .mui-table-view-cell:last-child, .mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){
			border-radius: 0px !important;}
		.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{left: 1px;top: 38%;}
		.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: #35D0C9;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的订单
		    	<a class="mui-icon  mui-icon-arrowdown" href="#popover" id="openPopover"></a>
		    </h1>
		    <a class="mui-icon mui-pull-right" id="chaxun">订单查询</a>
		</header>
		<div class="mui-content" id="news">
			<!--订单分类1   s-->
			<div id="popover" class="mui-popover">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll leibie">
				    <ul class="mui-table-view">
				    	<li class="mui-table-view-cell active lay"><a href="#">全部</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">机票</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">酒店住宿</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#" alt="汽车票-船票">汽车票-船票</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">火车票</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">12306</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">门票</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">美食外卖</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">用车自驾</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">旅游度假团购</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">签证</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">惠玩当地</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">保险-车险</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">全球购</a></li>
				    	<li class="mui-table-view-cell lay"><a href="#">商城</a></li>
				    </ul>
				</div>
			</div>
		</div>
			<!--订单分类1   e-->
			
			
			<!--订单分类2  s-->
			<div class="feilei2">
				<ul class="control mui-table-view">
					<li class="mui-table-view-cell lei active" id="all"><a href="#">全部</a></li>
					<li class="mui-table-view-cell lei" id="youxiao"><a href="#">有效单</a></li>
					<li class="mui-table-view-cell lei" id="daifu"><a href="#">待支付</a></li>
					<li class="mui-table-view-cell lei" id="tuikuan"><a href="#">退款单</a></li>
				</ul>
			</div>
			<!--订单分类2  e-->
			<!--所有订单    s-->
			<div class="all orders" style="display: block;">
				<ul class="mui-table-view" id="list">
			    <li class="mui-table-view-cell mui-media goodlist"  v-for="item in items">
			        <a href="javascript:;" :data-guid="item.guid" class="mui-input-row mui-checkbox mui-left">
			        	<!--<input name="checkbox1" value="Item 1" type="checkbox" checked>-->
			            <img class="mui-media-object mui-pull-left goods" :src="item.cover">
			            <div class="mui-media-body youMsg">
			            	<p class="mui-ellipsis-2 title">{{item.title}}</p>
			               	<span class="price">￥2000</span>
			               	<button class="zhifu">立即支付</button>
			               
			            </div>
			        </a>
			    </li>
			</ul>
			</div>
			<!--所有订单    e-->
			<!--有效订单  s-->
			<div class="youxiao orders">
				<ul class="mui-table-view" id="list2">
			    <li class="mui-table-view-cell mui-media goodlist" v-for="item in items">
			        <a href="javascript:;" :data-guid="item.guid">
			            <img class="mui-media-object mui-pull-left goods" :src="item.cover">
			            <div class="mui-media-body youMsg">
			            	<p class="mui-ellipsis-2 title">我是有效订单分类{{item.title}}</p>
			               	<span class="price">￥2000</span>
			               	<button class="zhifu">立即支付</button>
			               
			            </div>
			        </a>
			    </li>
			</ul>
			</div>
		    <!--有效订单  e-->
		    <!--待支付订单    s-->
		    <div class="daifu orders">
		    	<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media goodlist" id="OA_task_1">
				        <a href="javascript:;" class="mui-input-row mui-checkbox mui-left mui-slider-handle" >
				        	<!--<input name="checkbox1" value="Item 1" type="checkbox" checked>-->
				            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
				            <div class="mui-media-body youMsg">
				            	<p class="mui-ellipsis-2 title">我是待支付订单</p>
				               	<span class="price">￥2000</span>
				               	<button class="zhifu">立即支付</button>
				               
				            </div>
				            
				        </a>
				        <div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red">删除</a>
						</div>
				    </li>
				    <li class="mui-table-view-cell mui-media goodlist">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
				            <div class="mui-media-body youMsg">
				            	<p class="mui-ellipsis-2 title">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				               <span class="price">￥2000</span>
				               	<button class="zhifu">立即支付</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media goodlist">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
				            <div class="mui-media-body youMsg">
				            	<p class="mui-ellipsis-2 title">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				                <span class="price">￥2000</span>
				                <button class="zhifu">立即支付</button>
				                
				            </div>
				        </a>
				    </li>
			</ul>
		    </div>
		    <!--待支付订单     e-->
		    
		    <!--退款单     s-->
		    <div class="tuikuan orders">
		    	<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media goodlist">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
			            <div class="mui-media-body youMsg">
			            	<p class="mui-ellipsis-2 title">我是退款单</p>
			               	<span class="price">￥2000</span>
			               	<button class="zhifu">立即支付</button>
			               
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media goodlist">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
			            <div class="mui-media-body youMsg">
			            	<p class="mui-ellipsis-2 title">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
			               <span class="price">￥2000</span>
			               	<button class="zhifu">立即支付</button>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media goodlist">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left goods" src="http://placehold.it/40x30">
			            <div class="mui-media-body youMsg">
			            	<p class="mui-ellipsis-2 title">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
			                <span class="price">￥2000</span>
			                <button class="zhifu">立即支付</button>
			                
			            </div>
			        </a>
			    </li>
			</ul>
		    </div>
		    <!--退款单     e-->
		    
		    
		    
		    
		    
		    
		    
		</div>
		
		<!--<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>-->
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			$(".lay").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
			});
			$(".lei").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
				$(this).find("a").css("background-color","transparent");
				var index=$(this).index();
				$(".orders").eq(index).show().siblings(".orders").hide();
			});
			
			//data:需要的字段名
			var data = {column: "id,post_id,title,author_name,cover,published_at"};
			//新建vue
			var news = new Vue({
				el: '#news',
				data: {
					items: [] //列表信息流数据
				}
			});
			//plus准备完成时，执行加载全部订单的函数
			mui.plusReady(function(){
				all();
			});
			//监听“全部”的tap事件，触发时加载订单列表  (此为全部订单列表)
			document.getElementById("all").addEventListener("tap",function(){
				$(".orders.all").css("display","block");
				$(".orders.youxiao").css("display","none");
				$(".orders.daifu").css("display","none");
				$(".orders.tuikuan").css("display","none");
				$(this).addClass("active").siblings().removeClass("active");
				all();
				
			})
			//加载全部订单
			function all(){
				mui.getJSON("http://spider.dcloud.net.cn/api/news",data,function(res){
					news.items = news.items.concat(convert(res));
				});
			}
			
			//监听“有效”单，触发时加载有效单的列表
			
			document.getElementById("youxiao").addEventListener("tap",function(){
//				mui.alert(111);
				all();
				$(".orders.all").css("display","none");
				$(".orders.youxiao").css("display","block");
				$(".orders.daifu").css("display","none");
				$(".orders.tuikuan").css("display","none");
				$(this).addClass("active").siblings().removeClass("active");
			})
			
			//监听“待支付”订单，触发时加载待支付列表
			document.getElementById("daifu").addEventListener("tap",function(){
				$(".orders.all").css("display","none");
				$(".orders.youxiao").css("display","none");
				$(".orders.daifu").css("display","block");
				$(".orders.tuikuan").css("display","none");
			})
			//监听“退款”订单，触发时加载退款订单列表
			document.getElementById("tuikuan").addEventListener("tap",function(){
				$(".orders.all").css("display","none");
				$(".orders.youxiao").css("display","none");
				$(".orders.daifu").css("display","none");
				$(".orders.tuikuan").css("display","block");
			});
			
			
			
			//删除:
			var btnArray = ['确认', '取消'];
			$('#OA_task_1').on('tap', '.mui-btn', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
			
			
			
			
			
			
			
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						guid: item.post_id,
						title: item.title,
						author: item.author_name,
						cover: item.cover,
//						time:dateUtils.format(item.published_at)
					});
				});
				return newItems;
			}
			
			
			
		</script>
	</body>
</html>
